<script setup lang="ts">
import { ref } from 'vue';
import PasswordForm from './components/PasswordForm.vue';
import PhoneForm from './components/PhoneForm.vue';
// 控制模态框显示隐藏的变量
const centerDialogVisible = ref(false);
// 控制登录选择的模式 密码登录(password) 和 短信登录(phone)
const loginModel = ref('password');
// 自定义事件 用来让子组件控制父组件切换登录方式
const handelToggleLoginModel = (model: string) => {
  loginModel.value = model;
};
</script>

<script lang="ts">
export default {
  name: 'LoginTestView',
};
</script>

<template>
  <el-button type="primary" @click="centerDialogVisible = true">登录</el-button>

  <!-- 登录 模态框 -->
  <el-dialog
    v-model="centerDialogVisible"
    align-center
    width="30%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    center
    class="min-w-[600px] pb-8"
    destroy-on-close
  >
    <!-- 头部 选择登录方式-->

    <!--模态框 body主体部分 -->
    <div class="mx-auto w-[70%]">
      <div class="mb-6 flex justify-between gap-8">
        <div class="flex flex-1 items-center justify-center gap-4">
          <el-button
            link
            :type="loginModel === 'password' ? 'primary' : ''"
            @click="loginModel = 'password'"
          >
            <span class="text-xl">密码登录</span>
          </el-button>
          <el-divider direction="vertical" />
          <el-button
            link
            :type="loginModel === 'phone' ? 'primary' : ''"
            @click="loginModel = 'phone'"
          >
            <span class="text-xl">短信登录</span>
          </el-button>
        </div>
      </div>
      <div v-show="loginModel === 'password'">
        <PasswordForm @toggleLoginModel="handelToggleLoginModel" />
      </div>

      <div v-show="loginModel === 'phone'">
        <PhoneForm />
      </div>
    </div>
    <!-- 其他登录方式 -->
    <!-- <template #footer>
    <span class="dialog-footer">
      <el-button @click="centerDialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="centerDialogVisible = false">
        Confirm
      </el-button>
    </span>
  </template> -->
  </el-dialog>
</template>

<style scoped>
/* PC电脑端 */
@media screen and (width <= 1024px) {
}
</style>
